<template>
    <div class="driver-wrapper">
        <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            width="800px  "
            class="tableDialog"
            :before-close="handleClose"
        >
            <div class="dialog-container">
                <p class="title-wrapper">
                    <span class="title-content">{{businessObj.business.companyName}}<span>|</span>{{$dictUtils.getDictLabel("payMode", businessObj.payMode, "")}}<span>|</span>{{$dictUtils.getDictLabel("dataType", businessObj.business.dataType, "")}}<span>|</span>{{businessObj.product.name}}</span>执行中业务如下：
                </p>
                <div class="container">
                    <section class="dialogSearch">
                        <el-input v-model="inputName" size="small" :placeholder="holder"
                                  @input=" getList2 ($event,true)">
                            <i slot="suffix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                        <el-table
                            size="mini"
                            v-loading="loading"
                            :data="tableData"
                            style="width: 100%; margin-top: 10px"
                            border
                            :header-cell-style="{
                'background-color': '#eeeeee !important',
              }"
                            :row-class-name="tableRowClassName"
                        >
                            <el-table-column
                                prop="codes"
                                label="业务编号"
                                :show-overflow-tooltip="true"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="countyCode"
                                label="可用余量"
                                align="left"
                                :show-overflow-tooltip="true"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="executeStartDate"
                                label="生效时间"
                                align="left"
                                :show-overflow-tooltip="true"
                            >
                            </el-table-column>
                            <el-table-column label="操作" width="71px">
                                <template slot-scope="scope">
                                    <el-link
                                        type="primary"
                                        :underline="false"
                                        @click="selectRow(scope.row)"
                                    >选择
                                    </el-link
                                    >
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination
                            background
                            @current-change="handleCurrentChange"
                            :page-size="page.pageSize"
                            :current-page="page.pageNo"
                            layout="total,prev, pager, next"
                            :total="page.total"
                        >
                        </el-pagination>
                    </section>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {getWindowList} from '@/api/business/business.js'

    export default {
        data() {
            return {
                tableData: [],
                loading: false,
                dialogVisible: false,
                inputName: '',
                data: [],
                title: '选择业务',
                mark: '',
                holder: '',
                page: {
                    pageSize: 10,
                    pageNo: 1,
                    total: 20
                }
            }
        },
        watch: {
            mark() {
                if (this.mark) {
                    this.holder = '请输入' + this.mark + '名称'
                }
            }
        },
        methods: {
            handleCurrentChange(e) {
                this.page.pageNo = e
                this.getCompanyList(this.page)
                console.log(e)
            },
            getPlaceholder() {
                const placeholder = '请输入' + this.mark + '名称'
                return placeholder
            },
            // 获取列表
            getCompanyList(params, businessObj) {
                this.businessObj = businessObj
                getWindowList({
                    companyId: this.businessObj.business.companyId,
                    dataType: this.businessObj.business.dataType,
                    payMode: this.businessObj.payMode,
                    productId: this.businessObj.product.id,
                    pageSize: this.page.pageSize,
                    pageNo: this.page.pageNo
                }).then((res) => {
                    if (res.data.code === '200') {
                        this.tableData = res.data.result.list
                        this.page.total = res.data.result.count

                        console.log(this.page.total)
                    }
                })
            },

            // 点击树获取列表和搜索获取列表
            getList2($event, isSearch) {
                console.log($event)
                if (isSearch) {
                    getWindowList({
                        codes: $event,
                        companyId: this.businessObj.business.companyId,
                        dataType: this.businessObj.business.dataType,
                        payMode: this.businessObj.payMode,
                        productId: this.businessObj.product.id,
                        pageSize: this.page.pageSize,
                        pageNo: this.page.pageNo
                    }).then((res) => {
                        if (res.data.code === '200') {
                            this.tableData = res.data.result.list
                            this.page.total = res.data.result.count
                            console.log(this.page.total)
                        }
                    })
                }
            },

            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                    return 'warning-row'
                } else {
                    return 'success-row'
                }
            },
            // 选择行
            selectRow(row) {
                this.$emit('getCompanyData', row)
                this.dialogVisible = false
            },

            handleClose(done) {
                done()
            },
            close() {
            },
            doSubmit() {
            }
        }
    }
</script>
<style scoped lang="scss">
    @import '@/assets/scss/config.scss';
    ::v-deep .el-pagination {
        margin-top: 30px;
        text-align: right;
    }

    .driver-wrapper {
        ::v-deep.el-dialog {
            .el-dialog__body {
                padding: 20px 20px 24px !important;
                .title-wrapper{
                    font-size: 16px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    margin-bottom: 20px;
                    .title-content{
                        color: $--color-primary-liyu;
                        margin-right: 5px;
                        span{
                            margin: 0 5px;
                        }
                    }
                }
                .el-table{
                    th:first-child,td:first-child{
                        .cell{
                            text-align: left;
                            padding: 0 10px;
                        }
                    }
                }
            }
        }
    }

    .dialog-container {
        width: 100%;
    }

    .container {
        width: 100%;
        /*height: 500px;*/
        display: flex;
    }

    .left-container {
        margin-right: 20px;
        width: 100px;
        overflow: auto; /*当内容超过，出现滚动条*/
    }

    .dialog-footer {
        width: 200px;
        margin: 0 auto;
        margin-bottom: 20px;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    ::v-deep .el-table .warning-row {
        background: #f7f7f7;
    }
</style>
